<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: fullcalendar-css"/>
        <style>
            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 1100px;
                margin: 0 auto;
            }

            .fc-view-harness {
                background-color: white;
            }

            .layui-anim-upbit {
                height: 150px;
            }
        </style>
    </head>
    <body class="gray-bg">


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: fullcalendar-js"/>

        <!--渲染数据-->
        <script th:inline="javascript">
            var prefix = ctx + "oa/schedule"

            //日程数组
            var scheduleData = [];

            //法定节假日日期
            var holidayDate = [[${holidayDate}]];
            //调休日期
            var holidayWorking = [[${holidayWorking}]];
            //用户的请假日期
            var leave = [[${leave}]];
            //用户的日程日期
            var schedule = [[${schedule}]];

            //动态向scheduleData中添加对象
            for (let i = 0; i < holidayDate.length; i++) {
                let data = {};
                data.title = holidayDate[i].holiday.name;
                data.start = holidayDate[i].beginDate;
                data.end = holidayDate[i].finishDate;
                data.allDay = true;
                data.color = 'rgba(180,133,78,0.67)';
                data.date_Type = "1";
                scheduleData.push(data);
            }

            for (let i = 0; i < holidayWorking.length; i++) {
                let data = {};
                data.title = "调休";
                data.start = holidayWorking[i].date;
                data.end = holidayWorking[i].date;
                data.allDay = true;
                data.color = 'rgba(255,0,0,0.64)';
                data.date_Type = "2";
                scheduleData.push(data);
            }

            for (let i = 0; i < leave.length; i++) {
                let data = {};
                data.title = leave[i].flowCategoryInfo.name;
                data.start = leave[i].beginDate;
                data.end = leave[i].finishDate;
                data.allDay = true;
                data.color = 'rgba(125,125,125,0.19)';
                data.textColor = "black";
                data.date_Type = "3";
                scheduleData.push(data);
            }

            for (let i = 0; i < schedule.length; i++) {
                scheduleData.push(schedule[i]);
            }


        </script>
        <script>
            let flat = true;
            let flat1 = true;
            var laydate, form;
            layui.use(['laydate', 'form'], function () {
                laydate = layui.laydate;
                form = layui.form;
            });

            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prevYear,prev,next,nextYear today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                    },
                    weekNumbers: true,
                    navLinks: true,
                    initialDate: new Date(),
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true, // display business hours
                    editable: true,
                    selectable: true,
                    events: scheduleData,
                    //天点击
                    select: function (date) {
                        //判断添加的是否小于当前时间
                        if (date.start.getTime() < new Date().getTime() || date.end.getTime() < new Date().getTime()) {
                            $.modal.alertWarning("不能添加小于当前时间的日程事件");
                            return;
                        }

                        layer.open({
                            type: 1 //Page层类型
                            , area: ['550px', '500px']
                            , title: '新建日程'
                            , shade: 0.6 //遮罩透明度
                            , anim: 1 //0-6的动画形式，-1不开启
                            , content: '<form class="layui-form" style="padding: 15px;">\n' +
                                '            <input type="hidden" name="allDay" value="' + date.allDay + '" />' +
                                '            <div class="layui-form-item">\n' +
                                '                <label class="layui-form-label">日程名称</label>\n' +
                                '                <div class="layui-input-block">\n' +
                                '                    <input type="text" name="title" required lay-verify="required" placeholder="日程名称" autocomplete="off" class="layui-input">\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-form-item">\n' +
                                '                <label class="layui-form-label">开始时间</label>\n' +
                                '                <div class="layui-input-block">\n' +
                                '                    <input type="text" id="startDate" required lay-verify="required" name="start" placeholder=" - " autocomplete="off" class="layui-input">\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-form-item">\n' +
                                '                <label class="layui-form-label">结束时间</label>\n' +
                                '                <div class="layui-input-block">\n' +
                                '                    <input type="text" id="endDate" required lay-verify="required" name="end" placeholder=" - " autocomplete="off" class="layui-input">\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-form-item">\n' +
                                '                <label class="layui-form-label">提醒时间</label>\n' +
                                '                <div class="layui-input-block">\n' +
                                '                    <select name="advanceTime">' +
                                '                       <option value="0">事件开始时</option>' +
                                '                       <option value="5">提前5分钟</option>' +
                                '                       <option value="15">提前15分钟</option>' +
                                '                       <option value="30">提前30分钟</option>' +
                                '                       <option value="60">提前1小时</option>' +
                                '                       <option value="120">提前2小时</option>' +
                                '                       <option value="180">提前3小时</option>' +
                                '                       <option value="1440">提前1天</option>' +
                                '                       <option value="2880">提前2天</option>' +
                                '                    </select>' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-form-item">\n' +
                                '                <label class="layui-form-label">提醒方式</label>\n' +
                                '                <div class="layui-input-block">\n' +
                                '                    <select name="type">' +
                                '                       <option value="0">不提醒</option>' +
                                '                       <option value="1">站内提醒</option>' +
                                '                       <option value="2">邮件提醒</option>' +
                                '                       <option value="3">短信提醒</option>' +
                                '                   </select>' +
                                '                    <i style="font-size: 14px;color: #8e8c8c;">使用邮箱或短信提醒请查看邮箱或手机号是否正确,以防对你带来不便</i>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '            <div class="layui-form-item" style="margin-top: 30px;">\n' +
                                '               <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="submit">确定</button>\n' +
                                '           </div>\n' +
                                '        </form>'
                        });


                        form.render();

                        let ins1 = laydate.render({
                            elem: '#startDate'
                            , type: 'datetime'
                            , value: date.start
                        });
                        let ins2 = laydate.render({
                            elem: '#endDate'
                            , type: 'datetime'
                            , value: date.end
                        });

                        //日程事件表单保存提交
                        form.on('submit(submit)', function (data) {
                            if (data.field.allDay == "false") {
                                data.field.allDay = false;
                            } else {
                                data.field.allDay = true;
                            }
                            $.operate.post(prefix + "/save", data.field, function (result) {
                                if (result.code == 0) {
                                    $.modal.msgSuccess("操作成功");
                                    if (result.msg.indexOf("@") != -1) {
                                        var jobid = result.msg.split("@");
                                        data.field.jobId = jobid[1];
                                        data.field.id = jobid[2];
                                    } else {
                                        data.field.jobId = 0;
                                    }
                                    calendar.addEvent(data.field);
                                    layer.closeAll();
                                }
                            });

                        });


                    },
                    //事件点击
                    eventClick: function (info) {
                        //请假日期 调休日期 假期日期 如果则不显示操作DOM
                        if (info.event.extendedProps.date_Type == 1 || info.event.extendedProps.date_Type == 2 || info.event.extendedProps.date_Type == 3) {
                            return;
                        }

                        //获取鼠标 X,Y 给操作的DOM定位
                        let mouseX = event.pageX + document.body.scrollLeft;//鼠标x位置
                        let mouseY = event.pageY + document.body.scrollTop;//鼠标y位置
                        $(".operation").css("left", mouseX + -65 + "px");
                        $(".operation").css("top", mouseY + "px");
                        $(".operation").css("display", "block");

                        //事件 点击查看
                        $(".eventSelect").click(function () {
                            //清空所有页面弹框
                            layer.closeAll();

                            //layui中的bug 一个弹框弹出多次 增加一个判断防止多次显示
                            flat = true;

                            //给提醒类型重新赋值
                            var type;
                            if (info.event.extendedProps.type == 0) {
                                type = "不提醒"
                            } else if (info.event.extendedProps.type == 1) {
                                type = "站内提醒"
                            } else if (info.event.extendedProps.type == 2) {
                                type = "邮件提醒"
                            } else {
                                type = "短信提醒"
                            }

                            if (flat) {
                                flat = false;
                                layer.open({
                                    type: 1 //Page层类型
                                    , area: ['550px', '400px']
                                    , title: '查看日程'
                                    , shade: 0.6 //遮罩透明度
                                    , anim: 1 //0-6的动画形式，-1不开启
                                    , content: '<br>' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">日程名称</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" value="' + info.event.title + '" class="layui-input" disabled />\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">开始时间</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" value="' + $.common.formatterDate("dateTime", info.event.start) + '" class="layui-input" disabled />\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">结束时间</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" value="' + $.common.formatterDate("dateTime", info.event.end) + '" class="layui-input" disabled />\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">提醒时间</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" value="' + info.event.extendedProps.advanceTime + '" class="layui-input" disabled />\n' +
                                        '                    <i style="font-size: 14px;color: #8e8c8c;">提前提醒时间 单位:分钟</i>\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">提醒方式</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" value="' + type + '" class="layui-input" disabled />' +
                                        '                </div>\n' +
                                        '            </div>\n'
                                });
                            }
                        })


                        //事件 点击修改
                        $(".eventUpdate").click(function () {
                            //清空所有页面弹框
                            layer.closeAll();

                            //layui中的bug 一个弹框弹出多次 增加一个判断防止多次显示
                            flat1 = true;
                            if (flat1) {
                                flat1 = false;
                                //判断时间的
                                if (info.event.start.getTime() < new Date().getTime() || info.event.end.getTime() < new Date().getTime()) {
                                    $.modal.alertWarning("不能修改当前日期之前的日程事件");
                                    return;
                                }

                                //生成随机数赋值id
                                var random = Math.floor(Math.random() * 9999);

                                layer.open({
                                    type: 1 //Page层类型
                                    , area: ['550px', '500px']
                                    , title: '修改日程'
                                    , shade: 0.6 //遮罩透明度
                                    , anim: 1 //0-6的动画形式，-1不开启
                                    , content: '<form class="layui-form" style="padding: 15px;">\n' +
                                        '<input type="hidden" name="id" value="' + info.event.id + '" class="layui-input">' +
                                        '<input type="number" name="jobId" value="' + info.event.extendedProps.jobId + '" class="layui-input" style="display: none;">' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">日程名称</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <input type="text" name="title" value="' + info.event.title + '" required lay-verify="required" placeholder="日程名称" autocomplete="off" class="layui-input">\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">开始时间</label>\n' +
                                        '                <div class="layui-input-block" id="startDateDiv">\n' +
                                        '                    <input type="text" id="startDate' + random + '" required lay-verify="required" name="start" placeholder=" - " autocomplete="off" class="layui-input">\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">结束时间</label>\n' +
                                        '                <div class="layui-input-block" id="endDateDiv">\n' +
                                        '                    <input type="text" id="endDate' + random + '" required lay-verify="required" name="end" placeholder=" - " autocomplete="off" class="layui-input">\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">提醒时间</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <select name="advanceTime">' +
                                        '                       <option value="0">事件开始时</option>' +
                                        '                       <option value="5">提前5分钟</option>' +
                                        '                       <option value="15">提前15分钟</option>' +
                                        '                       <option value="30">提前30分钟</option>' +
                                        '                       <option value="60">提前1小时</option>' +
                                        '                       <option value="120">提前2小时</option>' +
                                        '                       <option value="180">提前3小时</option>' +
                                        '                       <option value="1440">提前1天</option>' +
                                        '                       <option value="2880">提前2天</option>' +
                                        '                    </select>' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item">\n' +
                                        '                <label class="layui-form-label">提醒方式</label>\n' +
                                        '                <div class="layui-input-block">\n' +
                                        '                    <select name="type">' +
                                        '                       <option value="0">不提醒</option>' +
                                        '                       <option value="1">站内提醒</option>' +
                                        '                       <option value="2">邮件提醒</option>' +
                                        '                       <option value="3">短信提醒</option>' +
                                        '                   </select>' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '            <div class="layui-form-item" style="margin-top: 30px;">\n' +
                                        '               <button type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="submit">确定</button>\n' +
                                        '           </div>\n' +
                                        '        </form>'
                                });
                                form.render();

                                //重新渲染下拉菜单
                                $("select[name = 'type']").val(info.event.extendedProps.type);
                                $("select[name = 'advanceTime']").val(info.event.extendedProps.advanceTime);
                                form.render("select");

                                laydate.render({
                                    elem: '#startDate' + random
                                    , type: 'datetime'
                                    , value: info.event.start
                                });
                                laydate.render({
                                    elem: '#endDate' + random
                                    , type: 'datetime'
                                    , value: info.event.end
                                });

                                //表单修改提交
                                form.on('submit(submit)', function (data) {
                                    console.log(data.field)
                                    $.operate.post(prefix + "/edit", data.field, function (result) {
                                        console.log(result.msg.indexOf("@"))
                                        if (result.code == 0) {
                                            $.modal.msgSuccess("操作成功");
                                            if (result.msg.indexOf("@") != -1) {
                                                var jobid = result.msg.split("@");
                                                data.field.jobId = jobid[1];
                                            }
                                            let event = calendar.getEventById(data.field.id);
                                            event.remove();
                                            calendar.addEvent(data.field);
                                            //清空所有页面弹框
                                            layer.closeAll();
                                        }
                                    });
                                });

                            }
                        })


                        //事件点击删除
                        $(".eventDelete").click(function () {
                            console.log(info.event.id);
                            layer.confirm('确定要删除吗？', {
                                btn: ['确定', '取消'] //按钮
                            }, function () {
                                $.operate.post(prefix + "/remove", {"id": info.event.id, "jobId": info.event.extendedProps.jobId, "type": info.event.extendedProps.type}, function (result) {
                                    if (result.code == 0) {
                                        let event = calendar.getEventById(info.event.id);
                                        event.remove();
                                    }
                                });
                            });
                        });
                    },
                    eventMouseEnter: function (info) {
                        layer.tips(info.event.title, info.el, {
                            tips: 1
                        });
                    }
                });
                calendar.render();
                calendar.setOption('locale', 'zh-cn');
            });

        </script>

        <div id='calendar'></div>

        <style>
            .operation {
                display: none;
                z-index: 9999;
                position: absolute;
                width: 50px;
                background-color: #0d8ddb;
                border-radius: 3px;
                border: 1px solid #084161;
            }

            .operation div {
                width: 100%;
                height: 30px;
                color: white;
                font-size: 12px;
                line-height: 30px;
                text-align: center;
            }

            .operation div:hover {
                border-radius: 3px;
                background-color: rgba(51, 154, 217, 0.83);
            }

        </style>

        <div class="operation">
            <div class="eventSelect">
                查看
            </div>
            <div class="eventUpdate">
                修改
            </div>
            <div class="eventDelete">
                删除
            </div>
        </div>

        <script>
            var oTop = $(".operation");
            $(oTop).mouseover(function () {
                $(".operation").css("display", "block");
            });
            $(oTop).mouseout(function () {
                $(".operation").css("display", "none");
            });
        </script>
    </body>
</html>